JavaScript Map – JS .map() メソッドの使用方法 (配列のメソッド) | 您所在的位置:网站首页 › js map 方法 › JavaScript Map – JS .map() メソッドの使用方法 (配列のメソッド) |
原文: JavaScript Map – How to Use the JS .map() Function (Array Method) 配列の要素に何かしらの処理を適用して、要素を変更した新しい配列を取得したい場合があります。 ループを使って繰り返し処理をわざわざ書く代わりに、標準で用意されている Array.map() メソッドを使うことができます。 Array.map() メソッドを使用すると、コールバック関数を使用して配列に反復処理を行い、その要素を変更できます。コールバック関数は、配列の各要素に対して実行されます。 例えば、以下のような要素を持った配列があります。 let arr = [3, 4, 5, 6];シンプルな JavaScript の配列そして、配列の各要素に対して、3 を掛ける必要があるとします。for を使用して、以下のようなループ処理を行うことを考えるかもしれません。 let arr = [3, 4, 5, 6]; for (let i = 0; i < arr.length; i++){ arr[i] = arr[i] * 3; } console.log(arr); // [9, 12, 15, 18]for ループを使用して、配列の反復処理を行うしかし、実は Array.map() メソッドを使用して、同じ結果を取得できます。以下に例を記載します。 let arr = [3, 4, 5, 6]; let modifiedArr = arr.map(function(element){ return element *3; }); console.log(modifiedArr); // [9, 12, 15, 18]map() メソッドを使用して、配列の反復処理を行うArray.map() メソッドは、要素に対して変更を適用するためによく使用されます。上記コードのように、特定の数字を掛けることもできますし、自身のアプリに応じて必要な処理を行うこともできます。 オブジェクトの配列に対して map() メソッドを使用する方法例えば、以下のように友達の firstName と lastName を値に持つオブジェクトの配列があるとします。 let users = [ {firstName : "Susan", lastName: "Steward"}, {firstName : "Daniel", lastName: "Longbottom"}, {firstName : "Jacob", lastName: "Black"} ]; オブジェクトの配列以下のように、map() メソッドを使用して、配列をループし、firstName と lastName の値を結合できます。 let users = [ {firstName : "Susan", lastName: "Steward"}, {firstName : "Daniel", lastName: "Longbottom"}, {firstName : "Jacob", lastName: "Black"} ]; let userFullnames = users.map(function(element){ return `${element.firstName} ${element.lastName}`; }) console.log(userFullnames); // ["Susan Steward", "Daniel Longbottom", "Jacob Black"]map() メソッドを使用して、オブジェクトの配列の反復処理を行うmap() メソッドでは、要素以外の値も使用できます。map() メソッドによってコールバック関数に渡される全ての引数を確認していきましょう。 map() メソッドの引数を省略しない構文map() メソッドの構文は以下のようになります。 arr.map(function(element, index, array){ }, this);コールバック関数である function() が配列の各要素に呼ばれます。map() メソッドは引数に、現在処理している要素の値である element、添字である index、また処理を実行している配列自体である array を渡します。 引数 this はコールバック関数の中で使用されます。デフォルトでは、その値は undefined となっています。 例えば、this の値を数値 80 に変更する方法を以下に記載します。 let arr = [2, 3, 5, 7] arr.map(function(element, index, array){ console.log(this) // 80 }, 80);map() メソッドの引数 this に、数値を代入するconsole.log() を使用して、他の引数の確認もできます。 let arr = [2, 3, 5, 7] arr.map(function(element, index, array){ console.log(element); console.log(index); console.log(array); return element; }, 80);値を確認するために、引数をログを出力する以上が Array.map() メソッドに関する必要な情報です。大抵、コールバック関数で使用される引数は element だけで、残りの引数は省略されることが多くあります。私が普段取り組んでいるプロジェクトでもそうなっています。 このチュートリアルをお読みくださりありがとうございます。私が書いた他の JavaScript チュートリアル how to sum an array of objects (配列のオブジェクトの値を足す方法) や methods to find a palindrome string (回文の文字列を探すためのメソッド) も役に立つかもしれません。これらは、JavaScript でたびたび質問される問題に関する記事です。 また、Web 開発のチュートリアル (主に JavaScript 関連) について無料ニュースレターを配信しています。 |
CopyRight 2018-2019 实验室设备网 版权所有 |